<template>
    <div>
        <div v-for="(item, idx) in rankList" :key="idx" style="margin-bottom: 15px;">
            <div class="rank-header"><span>No.{{ idx + 1 }} {{ item[labelField] }}</span> <span style="float: right">{{
                item[countField] }}</span></div>
            <el-progress :percentage="item.percent" :stroke-width="15" :color="customColor" text-inside
                :show-text="false" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'RankCharts',
    props: {
        rankList: {
            type: Array,
            required: true,
            default: () => []
        },
        labelField: {
            type: String,
            required: true,
            default: ''
        },
        countField: {
            type: String,
            required: true,
            default: ''
        }
    },
    data() {
        return {
            customColor: '#1BBDEC',
            completeVal: 0
        }
    }
}
</script>

<style scoped>
/* 进度条的圆角移除 */
.el-progress-bar__outer,
.el-progress-bar__inner {
    border-radius: 0;
}

/* 移除进度条的底色，设置底部百分百线条 */
.el-progress-bar__outer {
    background-color: unset !important;
    border-bottom: 1px #1BBDEC solid;
}

/* 拉开进度条底线和占比的间距 */
.el-progress-bar__inner {
    top: -2px;
}

/* 进度条上面的排名信息展示 */
.rank-header {
    color: #1BBDEC;
    margin-bottom: 5px;
    font-size: 18px;
}
</style>